<div class="content-section introduction">
    <div class="feature-intro">
        <h1>Fieldset</h1>
        <p>Fieldset is a grouping component with the optional content toggle feature.</p>
    </div>
    <app-demoActions github="fieldset" stackblitz="fieldset-demo"></app-demoActions>
</div>

<div class="content-section implementation">
    <div class="card">
        <h5>Regular</h5>
        <p-fieldset legend="Header">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </p-fieldset>

        <h5>Toggleable</h5>
        <p-fieldset legend="Header" [toggleable]="true">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </p-fieldset>
    </div>
</div>

<div class="content-section documentation">
    <p-tabView>
        <p-tabPanel header="Documentation">
            <h5>Import</h5>
<app-code lang="typescript" ngNonBindable ngPreserveWhitespaces>
import &#123;FieldsetModule&#125; from 'primeng/fieldset';
</app-code>

            <h5>Getting Started</h5>
            <p>Fieldset is defined with p-fieldset element.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fieldset legend="Header"&gt;
    Content
&lt;/p-fieldset&gt;
</app-code>

            <h5>Toggleable</h5>
            <p>Content of the fieldset can be expanded and collapsed using <i>toggleable</i> option, default state is defined with collapsed option.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fieldset legend="Header" [toggleable]="true"&gt;
    Content
&lt;/p-fieldset&gt;
</app-code>

            <h5>Custom Legend</h5>
            <p>Header  section can be customized using <i>header</i> template.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fieldset&gt;
    &lt;ng-template pTemplate="header"&gt;Custom Legend Content&lt;/ng-template&gt;
    Content
&lt;/p-fieldset&gt;
</app-code>

            <h5>Animation Configuration</h5>
            <p>Transition of toggle animation can be customized using the <i>transitionOptions</i> property with a default value as <b>400ms cubic-bezier(0.86, 0, 0.07, 1)</b>, 
                example below disables the animation altogether.</p>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;p-fieldset [transitionOptions]="'0ms'"&gt;
&lt;/p-fieldset&gt;
</app-code>
            <h5>Properties</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Type</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>legend</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Header text of the fieldset.</td>
                        </tr>
                        <tr>
                            <td>toggleable</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>When specified, content can toggled by clicking the legend.</td>
                        </tr>
                        <tr>
                            <td>collapsed</td>
                            <td>boolean</td>
                            <td>false</td>
                            <td>Defines the default visibility state of the content.</td>
                        </tr>
                        <tr>
                            <td>style</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Inline style of the fieldset.</td>
                        </tr>
                        <tr>
                            <td>styleClass</td>
                            <td>string</td>
                            <td>null</td>
                            <td>Style class of the fieldset.</td>
                        </tr>
                        <tr>
                            <td>transitionOptions</td>
                            <td>string</td>
                            <td>400ms cubic-bezier(0.86, 0, 0.07, 1)</td>
                            <td>Transition options of the animation.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Events</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>onBeforeToggle</td>
                            <td>event.originalEvent: browser event<br>
                                event.collapsed: state as a boolean</td>
                            <td>Callback to invoke before content toggle.</td>
                        </tr>
                        <tr>
                            <td>onAfterToggle</td>
                            <td>event.originalEvent: browser event<br>
                                event.collapsed: state as a boolean</td>
                            <td>Callback to invoke after content toggle.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Templates</h5>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Parameters</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>header</td>
                            <td>-</td>
                        </tr>
                        <tr>
                            <td>content</td>
                            <td>-</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Styling</h5>
            <p>Following is the list of structural style classes, for theming classes visit <a href="#" [routerLink]="['/theming']">theming page</a>.</p>
            <div class="doc-tablewrapper">
                <table class="doc-table">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Element</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>p-fieldset</td>
                            <td>Fieldset element</td>
                        </tr>
                        <tr>
                            <td>p-fieldset-toggleable</td>
                            <td>Toggleable fieldset element</td>
                        </tr>
                        <tr>
                            <td>p-fieldset-legend</td>
                            <td>Legend element.</td>
                        </tr>
                        <tr>
                            <td>p-fieldset-content</td>
                            <td>Content element.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

            <h5>Dependencies</h5>
            <p>None.</p>
        </p-tabPanel>

        <p-tabPanel header="Source">
            <a href="https://github.com/primefaces/primeng/tree/master/src/app/showcase/components/fieldset" class="btn-viewsource" target="_blank">
                <span>View on GitHub</span>
            </a>
            <a href="https://stackblitz.com/edit/primeng-fieldset-demo" class="btn-viewsource" style="margin-left: .5em;" target="_blank">
                <span>Edit in StackBlitz</span>
            </a>
<app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
&lt;h5&gt;Regular&lt;/h5&gt;
&lt;p-fieldset legend="Header"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/p-fieldset&gt;

&lt;h5&gt;Toggleable&lt;/h5&gt;
&lt;p-fieldset legend="Header" [toggleable]="true"&gt;
    &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
        Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
&lt;/p-fieldset&gt;
</app-code>
        </p-tabPanel>
        <p-tabPanel header="StackBlitz">
            <ng-template pTemplate="content">
                <iframe src="https://stackblitz.com/edit/primeng-fieldset-demo?embed=1" style="width: 100%; height: 768px; border: none;"></iframe>
            </ng-template>
        </p-tabPanel>
    </p-tabView>
</div>